﻿<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title ">
                    <span>工时数据</span>
                </h3>
                

                        <span>
                            <span style="margin-left:10px;">选择时间：</span>
                            <div style="width:120px;display:inline-block;">
                                <p-calendar
                                    [(ngModel)]="selectedDate"
                                    view="month"
                                    dateFormat="yy-mm"
                                    [yearNavigator]="true"
                                    yearRange="2000:2030"
                                    [locale]="calendarHelper.cn"
                                ></p-calendar>
                            </div>
                        </span>

                            <span style="margin-left:60px;">车间：</span>
                            <div style="width:200px;display:inline-block;">
                                <select
                                    #workShopCombobox
                                    name="workShopname"
                                    class="form-control"
                                    [(ngModel)]="workShop"
                                   
                                >
                                    <option
                                        *ngFor="let workShopCombobox of workShopComboboxs"
                                        [value]="workShopCombobox.value"
                                        >{{ workShopCombobox.displayText }}</option
                                    >
                                </select>
                            </div>
                            <button
                            class="btn btn-primary"
                            type="button"
                            (click)="getManHour()"
                            style="margin-left: 20px;"
                        >
                            查看工时
                        </button>     
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="tabbable-line">
                    <div class="tab-content" style="padding-top:0;">
                        <div class="tab-pane active" id="tab-model">
                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <p-table
                                        #dataTable
                                        (onLazyLoad)="getManHour($event)"
                                        [value]="primengTableHelper.records"
                                        rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                        [paginator]="false"
                                        [lazy]="true"
                                        [scrollable]="true"
                                        ScrollWidth="100%"
                                        [responsive]="primengTableHelper.isResponsive"
                                        [resizableColumns]="primengTableHelper.resizableColumns"
                                    >
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 220px">
                                                   条码号
                                                </th>
                                                <th style="width: 100px">
                                                        数量
                                                    </th>
                                                <th style="width: 150px">
                                                    任务编号
                                                </th>
                                                <th style="width: 150px">
                                                        图号
                                                    </th>
                                                 <th style="width: 150px">
                                                     产品名称
                                                     </th>
                                                <th style="width: 50px">
                                                    部门
                                                </th>
                                               
                                                
                                                <!-- <th style="width: 150px">
                                                    条形码
                                                </th> -->
                                                <th style="width: 50px">
                                                    工时
                                                </th>
                                                <!-- <th style="width: 150px">
                                                    车间总工时
                                                </th>
                                                <th style="width: 150px">
                                                    占比
                                                </th> -->
                                            </tr>
                                        </ng-template>
                                        <ng-template pTemplate="body" let-record="$implicit">
                                            <tr>
                                                <td style="width: 220px">
                                                    <span class="ui-column-title">条码号</span>
                                                    {{ record.batchId }}
                                                </td>
                                                <td style="width: 100px">
                                                        <span class="ui-column-title">数量</span>
                                                        {{ record.quantity }}
                                                    </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title">任务编号</span>
                                                    {{ record.batch.task.taskNum }}
                                                </td>
                                                <td style="width: 150px">
                                                        <span class="ui-column-title">图号</span>
                                                        {{ record.batch.task.productId }}
                                                    </td>
                                                    <td style="width: 150px">
                                                            <span class="ui-column-title">产品名称</span>
                                                            {{ record.batch.task.productName }}
                                                        </td>
                                                <td style="width: 50px">
                                                    <span class="ui-column-title">部门</span>
                                                    {{ record.workshop }}
                                                </td>
                                                
                                                
                                                <!-- <td style="width: 150px">
                                                    <span class="ui-column-title">条形码</span>
                                                    {{ record.batch.qcCard }}
                                                </td> -->
                                                <td style="width: 50px">
                                                    <span class="ui-column-title">工时</span>
                                                    {{ record.hours.standard }}
                                                </td>
                                                <!-- <td style="width: 150px">
                                                    <span class="ui-column-title">车间总工时</span>
                                                    {{ record.hours.workshopTotal }}
                                                </td>
                                                <td style="width: 150px">
                                                    <span class="ui-column-title">占比</span>
                                                    {{ record.hours.percentage }}
                                                </td> -->
                                            </tr>
                                        </ng-template>
                                    </p-table>

                                    <div class="primeng-paging-container">
                                        <p-paginator
                                            rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                                            #paginator
                                            (onPageChange)="getManHour($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                        >
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
